:root {
    --cutter-image: url("");
    --cutter-line-width: 2px;
    --cutter-line-color: #3a3b3d;
    --cutter-content-background: var(--default-background);
    --cutter-content-color: var(--default-color);
    --cutter-content-background-hover: #dadada;
    --cutter-content-color-hover: #191919;
}

.dark-side {
    --cutter-image: url("");
    --cutter-line-color: #e4e5e9;
    --cutter-content-background: var(--default-background);
    --cutter-content-color: var(--default-color);
    --cutter-content-background-hover: #333439;
    --cutter-content-color-hover: #f3fcff;
}

.cutter {
    background-image: var(--cutter-image);
    background-repeat: repeat-x;
    background-position: center;
    background-size: 16px 16px;
    min-height: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    cursor: default;
    
    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        text-align: center;
        font-size: 12px;
        min-height: 32px;
        background: var(--default-background);
        border: var(--cutter-line-width) solid var(--cutter-line-color);
        border-radius: 6px;
        padding: 8px 24px;
    }
    
    &.line {
        background-image: linear-gradient(to right, var(--cutter-line-color), var(--cutter-line-color));
        background-repeat: no-repeat;
        background-size: 100% var(--cutter-line-width);
        background-position: 0 center; 
    }

    &.dash {
        background-image: repeating-linear-gradient(
                to right,
                var(--cutter-line-color) 0,
                var(--cutter-line-color) 10px, /* Dash color and length */
                transparent 10px,
                transparent 20px /* Gap color and length */
        );
        background-repeat: no-repeat;
        background-size: 100% var(--cutter-line-width);
        background-position: 0 center;

        .content {
            border-style: dashed;
        }
    }

    &.dot {
        background-image: repeating-linear-gradient(
                to right,
                var(--cutter-line-color) 0,
                var(--cutter-line-color) var(--cutter-line-width), /* Dash color and length */
                transparent var(--cutter-line-width),
                transparent 10px /* Gap color and length */
        );
        background-repeat: no-repeat;
        background-size: 100% var(--cutter-line-width);
        background-position: 0 center; 
        
        .content {
            border-style: dotted;
        }
    }

    &.hoverable {
        @media (hover: hover) {
            &:hover .content {
                background: var(--cutter-content-background-hover);
                color: var(--cutter-content-color-hover);
            }
        }
        @media (hover: none) {
            &:active .content {
                background: var(--cutter-content-background-hover);
                color: var(--cutter-content-color-hover);
            }
        }
    }
}